import React from 'react';

import {Pagination, Button, Table, Modal} from 'antd';

export default class ObjectListView extends React.Component{
  
  /**
  * this.props.: (! 为必须)
  * !fetchData = function(page, size) 获取数据
  * !fetchCount = function() 获取总数
  *  formatData = function(rows) 格式化数据
  *  opers = [ {modalTitle, modalContent, modalConfirm} ] 所有操作，默认每次操作都会发生在一个Modal中 
  *  title = {} key=>中文标题
  *  
  */

  state = {
    loading:false,
    dataRows:[],
    dataCount:0,

    showModal:false,
    modalTitle:null,
    modalContent:null,
    modalConfirmLoading:false
  }

  modalRecord = null;
  modalConfirmFunction = null;

  page = 1;
  size = 10;

  async fetchData(){

    var dataRows = (await this.props.fetchData(this.page, this.size)).data;
    var dataCount = await this.props.fetchCount();

    if (this.props.formatData){
      dataRows = this.props.formatData(dataRows);
    }

    this.setState({
      loading:false,
      dataRows:dataRows,
      dataCount:dataCount.data
    });
  }

  async reload(page, size){
    if ((this.page !== page) || (this.size !== size)){
      this.page = page;
      this.size = size;
      
      this.setState({
        loading:true
      })

      await this.fetchData();
    }
  }

  async componentWillMount(){
    await this.fetchData();
  }

  defaultRenderLoading(){
    return <div>
      loading...
    </div>
  }

  defaultRenderTable(){

    var columns = [];

    if (this.state.dataRows.length>0){

      Object.keys(this.state.dataRows[0]).map((key, i)=>{
        columns.push({
          title: (this.props.title && this.props.title[key])?this.props.title[key]:key,
          dataIndex:key,
          key:key
        });
      });

      //操作按钮
      if (this.props.opers){
        
        columns.push({
          title: '操作',
          key: 'oper',
          render: (this.props.renderOper? this.props.renderOper : ((text, record) => (
            <span>
              {this.props.opers.map(v=>{
                return <Button key = {v.text} onClick = {(e) => {
                  var ret = v.onClick(text, record);

                  this.modalConfirmFunction = ret.modalConfirm;
                  this.modalRecord = record;
                  this.setState({
                    showModal:true,
                    modalConfirmLoading:false,
                    modalTitle:ret.modalTitle,
                    modalContent:ret.modalContent,
                  });
                }}>{v.text}</Button>
              })}
            </span>
          )))
        });

      }
    }

    var pagination = {
      total: this.state.dataCount,
      showSizeChanger: true,
      onShowSizeChange: (current, pageSize) => {
        this.reload(current, pageSize);
      },
      onChange: (current) => {
        this.reload(current, this.size);
      }
    } 

    return <Table loading = {this.state.loading} dataSource = {this.state.dataRows} columns = {columns} pagination = {pagination} />
  }

  defaultRenderModal(){
    var modalProps = {
      visible:this.state.showModal,
      confirmLoading:this.state.modalConfirmLoading,
      maskClosable:false,
      title:this.state.modalTitle,
      onOk:async ()=>{

        this.setState({
          modalConfirmLoading:true
        });

        var ret = await this.modalConfirmFunction(this.modalRecord);

        if (ret.ok){
          this.setState({
            modalConfirmLoading:false
          })
        }else{
          alert(ret.message?ret.message:"失败");
          this.setState({
            showModal:false
          });
        }

      },
      onCancel:()=>{this.setState({
        showModal: false
      })}
    }

    return <Modal {...modalProps}>
      {this.state.modalContent}
    </Modal>
  }

  render(){

    return <div>
      {this.props.renderTable?this.props.renderTable(this.state.dataRows, this.state.dataCount):this.defaultRenderTable()}
      {this.defaultRenderModal()}
    </div> 
    
  }
}

